<style scoped>
  .header{
    display: flex;
    flex-direction: column;
  }
  /*.head-top{*/
  /*width:100%;*/
  /*height:10px;*/
  /*background: transparent;*/
  /*}*/
  .search {
    display: block;
  }
  .head{
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #ffffff;
    padding: 20px 10px 10px 10px;
    background: #899DF7;
  }
  .head>.head-left{
    width:30px;
    height:30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .head>.head-center{
    flex: 1;
    position: relative;
  }
  .head>.head-center>h5{
    position: absolute;
    right:0;
    top:8px;
  }
  .head>.head-center>input{
    width:100%;
    height:100%;
    min-height: 30px;
    background: #ffffff;
    border:none;
    padding-left: 10px;
    border-radius: 4px;
    font-size: 14px;
  }
  .head>.head-center>input::-webkit-input-placeholder{
    color: #666;
    font-size:14px
  }
  .head-right{
    /*width: 30px;*/
    /*height:30px;*/
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .head-right p{
    color: #ffffff;
  }
  .content{
    margin-top: 10px;
  }
  .content ul li{
    border-bottom:1px solid #e9e9e9;
  }
  .content ul li a{
    display: flex;
    width: 100%;
    height:100%;
    padding: 8px 10px;
  }
</style>

<template>
  <div class="search">
    <div class="header">
      <div class="head-top"></div>
      <div class="head">
        <div class="head-center">
          <input id="search" placeholder="搜索关键词/视频名称/主讲人" v-model="inputValue" autofocus="autofocus">
          <button id="clickBtn" style="display: none"></button>
          <h5 class="iconfont icon-guanbi" @click="clearInput"></h5>
        </div>
        <div class="head-right"><p @click="goback">取消</p></div>
      </div>
    </div>

    <div class="content">
      <ul>
        <li v-for="allData in allDatas">
          <router-link :to="{path:'videoSuccess',query:{id: allData.url+'$'+allData.title}}">
            <p>{{allData.title}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import host from '../config.js'

  export default {
    data () {
      return {
        inputValue: null,
        allDatas: null
      }
    },
    watch: {
      inputValue (newData, oldData) {
        let that = this
        that.allDatas = null
        axios({
          method: 'GET',
          headers: {'Authorization': window.localStorage.getItem('token')},
          url: host.host + `/api/video/search?n=${newData}`
        }).then(function (data) {
          if(data.data.code === 200) {
            that.allDatas = data.data.data
            console.log(that.allDatas)
          }
        })
      }
    },
    mounted() {
      var inputElem = document.getElementById('search');
      inputElem.focus()
    },
    methods: {
      clearInput () {
        this.inputValue = null
        this.allDatas = null
      },
      goback () {
        this.$router.go(-1)
      }
    }
  }
</script>
